/**
 * 添加调查问卷
 * 
 * 添加调查问卷采用问一答一的方式顺序添加问题
 * 进入页面首先填写本次要调查的主题：例如 2024年双十一个人消费情况调查
 * 点击页面的添加问题，进入到下一个填写环节，例如添加单选题：你今年计划的计划消费额度是多少？然后添加选项
 * 点击下一题可以添加下一个问题，问题一共分为三种类型，单选、多选、填空（目前为止三种即可）
 * 
 * 页面的要素分两个阶段：
 * 第一阶段：填写主题：该阶段下有一个按钮：完成标题，开始创建问题
 * 第二阶段：填写问题：该阶段下有三个按钮：上一题、下一题、完成问卷题目编写
 * 第二阶段有如下要素：
 *   题目输入框：用来输入题目名称
 *   题目类型单选：选择题目类型 一共有三种类型
 *     对于单选类型的题目和多选类型的题目，可以按需添加选项，选项有两个要素，选项名称和选项值
 *     对于填空类型的题目来说，不需要添加选项。
 * 
 * 上述阶段图示如下：
 * 
 * 第一阶段：
 * 
 *  请输入问卷主题：____
 *  [完成标题 开始创建问题]、或者 [下一步]
 * 
 * 第二阶段（未选择题目类型）：
 *   请输入题目名称：____
 *   请选择题目类型：[单选] [多选] [填空]
 *  
 * 第二阶段（选择单选）
 *   请输入题目名称：____
 *   请选择题目类型：[√单选] [多选] [填空]
 *   请输入选项一的名称和选项一的值：____, ____
 *   [增加选项]
 *   [上一步] [下一步] [完成问卷题目编写]
 * 
 * 第二阶段（选择多选）
 *   请输入题目名称：____
 *   请选择题目类型：[单选] [√多选] [填空]
 *   请输入选项一的名称和选项一的值：____, ____
 *   [增加选项]
 *   [上一步] [下一步] [完成问卷题目编写]
 * 
 * 第二阶段（选择单选）
 *   请输入题目名称：____
 *   请选择题目类型：[单选] [多选] [√填空]
 *   [上一步] [下一步] [完成问卷题目编写]
 * 
 * 
 */
import { ApiRequest, apis } from '@/service'
import { useEffect, useState } from 'react'
import { Button, Form, Input, MessagePlugin, Radio, RadioGroup, Space } from 'tdesign-react'

const { FormItem } = Form

const {
  practiceService: {
    insertQuestionnaire
  }
} = apis

type selectionType = {
  label: string,
  value: string
}
type questionType = {
  title: string,
  type: 'radio' | 'multiple' | 'input',
  radioList: selectionType[],
  multipleList: selectionType[],
}

const AddQuestionnaires = () => {

  const [questionList, setQuestionList] = useState<questionType[]>([])
  const [selectionList,  setSelectionList] = useState<selectionType[]>([])

  const questionType = [
    {
      label: '单选',
      value: 'radio',
    },
    {
      label: '多选',
      value: 'multiple',
    },
    {
      label: '填空',
      value: 'input'
    }
  ]

  const [question, setQuestion] = useState<questionType>({
    type: 'radio',
    title: '',
    radioList: [],
    multipleList: []
  })


  useEffect(() => {
    //初始化多添加一个
    setQuestionList(questionList.concat(question))

  }, [question])

  useEffect(() => {
    console.log('questionList', questionList)
  }, [questionList])

  //题目内容变更
  const onTitleChange = (event: string) => {
    // setQuestion({
    //   ...question,
    //   title: event
    // })
  }

  //选择题目类型
  const onQuestionTypeChange = (event: any) => {
    // setQuestion({
    //   ...question,
    //   type: event
    // })
  }

  const onOptionLabelChange = (event: any) => {
    console.log('value',event)
  }

  //添加下一题（将该题的 question 添加到 questionList ）
  const addQuestion = (event: any) => {
    // const _radioList: selectionType[] = question.radioList.concat(event.fields)
    // const _multipleList: selectionType[] = question.radioList.concat(event.fields)
    // setQuestion({
    //   ...question,
    //   radioList: _radioList,
    //   multipleList: _multipleList
    // })
    // setQuestionList(questionList.concat(question))
   
    // 不会写这个（本来想直接限制field的类型的，后面用它直接点出来，但是没成功）
    // let fields: {
    //   "option-value": string, 
    //   "option-label": String,
    //   type: string, 
    //   title: string } = event.fields
    // }
    console.log('event.fields',event.fields)
  
    // for(let key in event.fields) {

    // }
    let _obj: selectionType = {
      label: event.fields['option-label'],
      value: event.fields['option-value']
    }

    const _radioList: selectionType[] = question.radioList.concat(_obj)
    const _multipleList: selectionType[] = question.radioList.concat(_obj)
    setQuestion({
      ...question,
      type: event.fields.type,
      title: event.fields.title,
      radioList: _radioList,
      multipleList: _multipleList
    }) 
    setQuestionList(questionList.concat(question))//没获取到新的question
  }

  const insertQuestionFunction  = () => {
    // params = {
    //   title: '程序员日常生活调查',
    //   userId: currentUser?.userId,
    //   ...params
    // }
    // 这里调用，那么还需要在服务器上写一个对应的接口
    ApiRequest({ api: insertQuestionnaire }).then((res: any) => {
      // 这里拿到的结果跟服务器 也就是 localhost3000 返回的结果是一模一样的，不需要单独再处理了
      // 怎么实现的暂时不用管，看一眼就行了
      // console.log('res', res)
      const { code = 'error', data = [], note = '' } = res
      if (code == 'ok') {
        // setTodoList(data)
        MessagePlugin.success(note, 2000)
      }
    })
  }

  const addOptions = () => {
    return <>
    <FormItem label='选项名称' name={'option-label'}>
        <Input clearable placeholder='请输入选项名称' onChange={onOptionLabelChange} />
      </FormItem> 
      <FormItem label='选项内容' name={'option-value'}>
        <Input clearable placeholder='请输入选项内容' onChange={onOptionLabelChange} />
      </FormItem>
    </>
  }



  return <div className='add-questionnaires'>
    <Form
      // ref={answerRef}
      className="option-form"
      onSubmit={addQuestion}
    // onReset={onReset}
    >
      <FormItem label='题目内容' name={'title'} >
        <Input onChange={onTitleChange} />
      </FormItem>
      <FormItem label='题目类型' name={'type'} >
        <RadioGroup onChange={onQuestionTypeChange}>
          {questionType.map((item: any, index: number) => {
            return <Radio value={item.value} key={index}>{item.label}</Radio>
          })}
        </RadioGroup>
      </FormItem>

      {addOptions()}
      {addOptions()}


      <FormItem className='button-block'>
        <Space>
          <Button theme="primary" onClick={addOptions}>
            添加下一选项
          </Button>
          <Button type="submit" theme="primary">
            添加下一题
          </Button>
          <Button theme="primary" onClick={addQuestion}>
            完成添加
          </Button>
        </Space>
      </FormItem>
    </Form>
  </div>
}

export default AddQuestionnaires
